import React, { useEffect, useState } from 'react';
import { Badge, TabBar } from 'antd-mobile';
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import styles from './style.less'; // 定位到底部样式
import { history, Route } from 'umi';
import { routes, routesName, tabs } from './tabsRouters';
const TabBarBox: React.FC = (props: any) => {
  // console.log(
  //   props.props.location.pathname,
  //   history.location.pathname.split('/')[1],
  // );

  const [activeKey, setActiveKey] = useState(
    history.location.pathname.split('/')[1],
  );
  useEffect(() => {
    InfoActiveKey('home');
  }, []);
  const InfoActiveKey = (e: string) => {
    setActiveKey(e);
    const InfoActiveKeyData = tabs.filter((item) => item.key.includes(e));
    history.replace(InfoActiveKeyData[0].link);
  };
  const structureRoute = () => {
    return routes.map((item) => {
      return routesName.map((vm) => {
        if (item.path == vm) {
          return (
            <Route
              key={item.key}
              exact={item.exact}
              path={vm}
              component={item.component}
            ></Route>
          );
        }
      });
    });
  };
  return (
    <div className={styles.app}>
      <div className={styles.contextBigBox}>
        {/* {props.children} */}
        {structureRoute()}
      </div>
      <div className={styles.body}>
        <TabBar activeKey={activeKey} onChange={InfoActiveKey} safeArea>
          {tabs.map((item) => {
            return (
              <TabBar.Item
                key={item.key}
                icon={item.icon}
                title={item.title}
                // badge={item.badge}
              />
            );
          })}
        </TabBar>
      </div>
    </div>
  );
};
export default TabBarBox;
